<template>
  <div ref="e-video" style="width:100%;height:100%">
    <div :id="id" ></div>
  </div>

</template>
<script>
import EZUIKit from "ezuikit-js";
export default {
  name: "EVideo",
  props:{
    id:{
      type:String
    },
    deviceSerial:{
      type:String
    },
    channelNo:{
      type:String
    },
  },
  data(){
    return{
      player:null
    }
  },
  watch:{
    deviceSerial:{
      handler() {
        this.$nextTick(()=>{
          this.init()
        })
      },
      immediate:true
    }
  },
  mounted() {

  },
  methods:{
    init(){
      let dom = this.$refs['e-video']
      let width = dom.offsetWidth
      let height = dom.offsetHeight

      this.player = new EZUIKit.EZUIKitPlayer({
        id: this.id.toString(), // 视频容器ID
        accessToken: sessionStorage.getItem('token'),
        url: `ezopen://open.ys7.com/${this.deviceSerial}/${this.channelNo}.live`,
        plugin: ['talk'], // 加载插件，talk-对讲
        width:width -3,
        height:height -3
      });
    }

  }
}
</script>

<style scoped lang="scss">

</style>
